<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-02-18 14:12:57
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-02-18 16:37:08
 * @FilePath: \flex展开效果\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main">
        <div class="box1 boxStyle big">
            <P>HEY</P>
            <p>LET'S</p>
            <P>DANCE</P>
        </div>
        <div class="box2 boxStyle big">
            <P>GIVE</P>
            <P>TAKE</P>
            <P>RECEIVE</P>
        </div>
        <div class="box3 boxStyle big">
            <P>EXPERIENCE</P>
            <P>IT</P>
            <P>TODAY</P>
        </div>
        <div class="box4 boxStyle big">
            <P>GIV</P>
            <P>ALL</P>
            <P>YOUCAN</P>
        </div>
        <div class="box5 boxStyle big">
            <P>LIFE</P>
            <P>IN</P>
            <P>MOTION</P>
        </div>
    </div>
    <script>
        const box = document.querySelectorAll('.boxStyle')
        box.forEach(item => {
            item.addEventListener('click', (e) => {
                item.classList.toggle('open')
            })
        })
        box.forEach(item => {
            item.addEventListener('transitionend', (e) => {
                if (e.propertyName.includes('flex-grow')) {
                    item.classList.toggle('show')
                }
            })
        })


        // if(!e.target.className.includes('open')){
        //         item.classList.toggle('open')
        //         item.classList.add('show')
        //         item.classList.remove('big')
        //     }else {
        //         item.classList.remove('open')
        //         item.classList.remove('show')
        //         item.classList.add('big')
        //     }
    </script>
</body>

</html>